<script setup>
import Map from "@/components/echarts/Map.vue";
import CountUp from "vue-countup-v3";
import { ref, onMounted } from "vue";
import WordCloud from "@/components/echarts/WordCloud.vue";
import TwoCircles from "@/components/echarts/TwoCircles.vue";
import BackgroundStyle from "@/components/BackgroundStyle.vue";
const dataObj = ref({
  achievement: 20,
  scientist: 55,
  book: 48,
  culture: 39,
}); //存放鼠标经过时上面四个框显示的数据
const onChangeDataGet = (e) => {
  dataObj.value = e;
};

//动画加载
const isShowAnimation = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isShowAnimation.value = true;
  }, 100);
});
</script>

<template>
  <!-- 主页面 -->
  <div class="mainPage">
    <!-- 主体部分 -->
    <div class="main">
      <!-- 导航栏 -->
      <Transition
        name="custom-classes"
        enter-active-class="animate__animated animate__fadeInDown"
        leave-active-class="animate__animated animate__bounceOutRight"
      >
        <NavigationBar v-if="isShowAnimation"></NavigationBar>
      </Transition>
      <!-- 主体部分的左边 -->
      <div class="left">
        <div class="leftTop">
          <Transition
            enter-active-class="animate__animated animate__fadeInLeftBig "
            leave-active-class="animate__animated animate__bounceOutRight"
          >
            <BackgroundStyle>
              <HorizontalBarChart></HorizontalBarChart>
            </BackgroundStyle>
          </Transition>
        </div>
        <div class="leftBottom">
          <Transition
            enter-active-class="animate__animated animate__fadeInLeftBig "
            leave-active-class="animate__animated animate__bounceOutRight"
          >
            <BackgroundStyle>
              <!-- <LineChart></LineChart> -->
              <TwoCircles></TwoCircles>
            </BackgroundStyle>
          </Transition>
        </div>
      </div>
      <!-- 主体部分的中间 -->
      <div class="center">
        <Transition
          enter-active-class="animate__animated animate__fadeInDownBig "
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <div class="centerTop" v-if="isShowAnimation">
            <!-- 计数部分 -->

            <ul>
              <li>
                <div class="textTop">
                  {{ dataObj.isNational ? "全国成就数量" : "该省成就数量" }}
                </div>
                <div class="textBottom">
                  <!-- 数字滚动插件 -->
                  <CountUp
                    :endVal="
                      dataObj.isNational
                        ? dataObj.nationalAchievement || 0
                        : dataObj.achievement || 0
                    "
                    class="myCountup"
                  />
                </div>
              </li>

              <li>
                <div class="textTop">
                  {{ dataObj.isNational ? "全国科学家数量" : "该省科学家数量" }}
                </div>
                <div class="textBottom">
                  <CountUp
                    :endVal="
                      dataObj.isNational
                        ? dataObj.nationalScientist || 0
                        : dataObj.scientist || 0
                    "
                    class="myCountup"
                  />
                </div>
              </li>
              <li>
                <div class="textTop">
                  {{ dataObj.isNational ? "全国著作数量" : "该省著作数量" }}
                </div>
                <div class="textBottom">
                  <CountUp
                    :endVal="
                      dataObj.isNational
                        ? dataObj.nationalBook || 0
                        : dataObj.book || 0
                    "
                    class="myCountup"
                  />
                </div>
              </li>
              <li>
                <div class="textTop">
                  {{ dataObj.isNational ? "全国文化数量" : "该省文化数量" }}
                </div>
                <div class="textBottom">
                  <CountUp
                    :endVal="
                      dataObj.isNational
                        ? dataObj.nationalCulture || 0
                        : dataObj.culture || 0
                    "
                    class="myCountup"
                  />
                </div>
              </li>
            </ul>
          </div>
        </Transition>

        <div class="centerBottom">
          <!-- 地图 -->
          <Transition
            enter-active-class="animate__animated animate__fadeInUpBig "
            leave-active-class="animate__animated animate__bounceOutRight"
          >
            <Map3DTest
              v-if="isShowAnimation"
              @onChangeData="onChangeDataGet"
            ></Map3DTest>
          </Transition>
        </div>
      </div>
      <!-- 主体部分的右边 -->
      <div class="right">
        <div class="rightTop">
          <Transition
            enter-active-class="animate__animated animate__fadeInRightBig "
            leave-active-class="animate__animated animate__bounceOutRight"
          >
            <BackgroundStyle>
              <LineChart></LineChart>
            </BackgroundStyle>
          </Transition>
        </div>
        <div class="rightBottom">
          <Transition
            enter-active-class="animate__animated animate__fadeInRightBig "
            leave-active-class="animate__animated animate__bounceOutRight"
          >
            <BackgroundStyle>
              <WordCloud></WordCloud>
            </BackgroundStyle>
          </Transition>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mainPage {
  --animate-duration: 0.5s; /* 控制动画速度 */
  background: url("/src/assets/homeImg/home.png") no-repeat center/cover;
  width: 100%;
  height: 100vh;
  // position: relative;
  // background: pink;
  // overflow: hidden; /* 裁剪溢出内容 不显示滚动条*/
  .main {
    display: flex;
    width: 100%;
    height: 100%;
    .centerTop {
      // flex: 1;
      position: relative;
      width: 100%;
      height: 100px;
      margin-top: 10px;
      // background: #96a7c8;
      background: rgba(0, 0, 0, 0.03);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* X偏移 Y偏移 模糊半径 颜色 */

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 20px;
        border-top: 4px solid #edf2f3;
        border-left: 4px solid #edf2f3;
      }
      &::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50px;
        height: 20px;
        border-bottom: 4px solid #edf2f3;
        border-right: 4px solid #edf2f3;
      }
      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0 50px;
        li {
          // background: #cd0d0d;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .textTop {
            font-size: 25px;
          }
          .textBottom {
            padding-top: 6px;
            :deep(span) {
              font-size: 35px !important;
              color: #5ab322;
              text-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* X偏移 Y偏移 模糊半径 颜色 */
            }
          }
        }
      }
    }
    .centerBottom {
      // aspect-ratio: 1/1;
      flex: 1;

      // background: #db57db;
    }

    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 500px;
      height: 100vh;
      // background: red;
      padding-top: 60px;
      .leftTop {
        flex: 1;
        margin: 10px;
        // background: #40e90d;
      }
      .leftBottom {
        flex: 1;
        margin: 10px;
        margin-top: 0;
        // background: #eedc13;
      }
    }
    .center {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-top: 60px;
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 500px;
      height: 100vh;
      // background: red;
      padding-top: 60px;
      .rightTop {
        flex: 1;
        margin: 10px;
        // background: #40e90d;
      }
      .rightBottom {
        flex: 1;
        margin: 10px;
        margin-top: 0;
        // background: #eedc13;
      }
    }
  }

  // .map {
  //   width: 500px;
  //   height: 500px;
  //   position: absolute;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -50%);
  //   background: pick;
  // }
}
</style>
